<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>考题管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/common.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="14" :offset="5">
            <div class="container">
                <div class="button-bar">
                    <div></div>
                    <div class="return-btn" title="返回主页" @click="returnHome">
                        <el-button type="warning" size="small" plain>
                            <i class="el-icon-back"></i>
                        </el-button>
                    </div>
                </div>
                <el-table
                        :data="list"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            :index="startIndex">
                    </el-table-column>
                    <el-table-column
                            prop="createDatetime"
                            label="答题时间">
                    </el-table-column>
                    <el-table-column
                            prop="totalCount"
                            label="总数量">
                    </el-table-column>
                    <el-table-column
                            prop="rightCount"
                            label="正确数量">
                    </el-table-column>
                    <el-table-column
                            prop="wrongCount"
                            label="错误数量">
                    </el-table-column>
                    <el-table-column
                            label="正确率">
                        <template slot-scope="scope">
                            {{ scope.row.rightCount / scope.row.totalCount * 100 + '%' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleDetail(scope.row)" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                list: [],
                pagination: 1,
                size: 10,
                startIndex: 1,
                total: 0
            }
        },
        methods: {
            getList() {
                axios.get(`/paper/t-paper/list?pagination=${this.pagination}&size=${this.size}`)
                    .then(res => {
                        console.log(res);
                        const data = res.data
                        this.list = data.model.records;
                        this.startIndex = (this.pagination - 1) * 10 + 1;
                        this.total = data.model.total
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            handleCurrentChange(val) {
                this.pagination = val;
                this.getList()
            },
            handlePrevClick() {
                this.pagination -= 1;
                this.getList()
            },
            handleNextClick() {
                this.pagination += 1;
                this.getList()
            },
            handleDetail(row) {
                window.location.href = `./paperDetail.html?id=${row.id}`
            },
            returnHome() {
                window.location.href = `./index.html`
            }
        },
        mounted: function () {
            this.getList()
        },
    })
</script>
</html>